<template>
  <view class="modify-phone-page">
    <!-- 表单区域 -->
    <view class="form-container">
      <!-- 姓名 -->
      <view class="form-item">
        <text class="label">姓名</text>
        <input
          class="input"
          v-model="contact"
          placeholder="请输入紧急联系人真实姓名"
        />
      </view>

      <!-- 联系电话 -->
      <view class="form-item">
        <text class="label">联系电话</text>
        <input
          class="input"
          type="number"
          v-model="phone"
          placeholder="请输入紧急联系人联系电话"
          maxlength="11"
        />
      </view>

      <!-- 提交按钮 -->
      <view class="footer-sub-btn">
        <button class="submit-btn" :disabled="!formValid" @click="submitForm">
          保存
        </button>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      phone: "", // 联系电话
      contact: "",
    };
  },
  computed: {
    // 表单验证
    formValid() {
      return /^1[3-9]\d{9}$/.test(this.phone);
    },
  },
  watch: {
    // 监听手机号和人机验证码变化
    phone(val) {
      // to do
    },
  },
  onLoad(options) {
    this.getEmergencyContact();
  },
  created() {},
  beforeDestroy() {},
  methods: {
    async getEmergencyContact() {
      try {
        const data = await this.$http.get("/h5/user/emergencyContact");
        this.contact = data.data.contact;
        this.phone = data.data.phone;
      } catch (error) {}
    },
    // 提交表单
    async submitForm() {
      if (!this.formValid) {
        uni.showToast({
          title: "输入正确手机号",
          icon: "none",
        });
        return;
      }
      uni.showLoading({
        title: "提交中...",
      });
      let formData = {
        contact: this.contact,
        phone: this.phone,
      };
      try {
        const res = await this.$http.post(
          "/h5/user/emergencyContact",
          formData
        );
        uni.hideLoading();
        uni.showToast({
          title: "提交成功",
          icon: "success",
        });
        setTimeout(() => {
					uni.navigateBack();
				}, 500);
        this.getEmergencyContact();
      } catch (error) {}
    },
  },
};
</script>
<style>
.modify-phone-page {
  padding: 20rpx 26rpx 0rpx 26rpx;
  position: relative;
}

.form-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 36rpx 40rpx;
  margin-top: 20rpx;
  display: flex;
}

.form-item:first-child {
  margin-top: 0rpx;
}

.form-item .label {
  display: block;
  width: 134rpx;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 500;
  font-size: 32rpx;
  color: #0b1f20;
  margin-right: 46rpx;
}

.form-item .input {
  flex: 1;
  font-size: 28rpx;
  color: #999999;
}

.footer-sub-btn {
  position: fixed;
  bottom: 40rpx;
  left: 0;
  margin: 0 26rpx;
  width: calc(100% - 52rpx);
}

.submit-btn {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 500;
  font-size: 36rpx;
  text-align: center;
  background: linear-gradient(90deg, #ff3f39 0%, #ff7937 100%);
  border-radius: 16rpx;
  color: #ffffff;
}

.submit-btn[disabled] {
  background-color: #b3d8ff;
}

.submit-btn:after {
  border: none;
}

.submit-btn[disabled]:not([type]),
.submit-btn[disabled][type="default"] {
  color: #ffffff;
}
</style>
